module.exports = `
<template>
<div style="width: 230px; overflow: hidden;">
  <el-col
    style="overflow-y:scroll;"
    :style="{height:heightLength+'px'}"
    class="el-left-menu"
    :span="3"
  >
    <el-menu
      style="height:200%;"
      :default-active="active"
      background-color="#3366CC"
      text-color="#fff"
      class="el-menu-vertical-demo"
      router
      unique-opened
    >
      <el-submenu v-for="(item, index) in leftMenuList" :key="index" :index="item.menu_href">
        <!-- title的模板 -->
        <template slot="title">
          <i :class="item.icon" style="color: #fff;"></i>
          {{item.menuName}}
        </template>

        <el-menu-item-group :key="list.menuUrl" v-for="list in item.sysMenuList">
          <el-menu-item :index="list.menuUrl">{{list.menuName}}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

    </el-menu>
  </el-col>
</div>
</template>

<script>
export default {
data() {
  return {
    active: "",
    scroll: "",
    routeList: [],
    heightLength: "",
    leftMenuList: [],
  };
},

//未用到的方式
mounted() {
  // this.routeList = JSON.parse(sessionStorage.getItem("menus")); //获取当前菜单缓存
  console.log("菜单", this.routeList);
  // this.leftPermission();
  //菜单滚动
  window.addEventListener("scroll", () => {
    let scrollHeight = document.body.scrollHeight;
    this.heightLength = scrollHeight - 80;
  });
},
created() {
  //   this.leftPermission();
  //      this.activePath();
  this.heightLength = document.body.scrollHeight;
},

mounted() {
  //测试 设置左导航数据

  this.leftMenuList = {{{navLeftDataList}}}

  //正式的请求方式
  this.leftPermission();
},
watch: {},
methods: {
  leftPermission() {
    //切换导航请求方式
    // let url = CONSTANT.ADMIN.GETMENULIST;
    let data = {};

    // common.get(url, null, null, res => {
    //   if (res.code == 200) {
    //     this.leftMenuList = res.data;
    //     console.log("左侧菜单", this.leftMenuList);
    //     //获取左侧导航菜单
    //   }
    //   this.activePath();
    // });
  },
  activePath() {
    //找到当前菜单项
    if ("/" == this.$route.path) {
      this.$nextTick(function () {
        //nextTick数据修改
        this.active = this.$route.path;
      });
    } else {
      this.$nextTick(function () {
        this.active = this.$route.path;
      });
    }
    console.log(this.$route, "aaa");
  },
  //    activePath(){
  //        this.active = this.$router.currentRoute.path
  //    }
},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
.el-left-menu {
height: 100%;
width: 230px;
}
//隐藏滚动条
.el-left-menu::-webkit-scrollbar {
width: 0 !important;
}
.el-menu-vertical-demo {
height: 100%;
box-sizing: border-box;
padding-top: 10px;
}

.el-left-menu {
  width: 230px !important;
}

.el-menu.el-menu-vertical-demo {
  padding-left: 12px !important;
  background-color: #3366CC;
  box-sizing: border-box;
}

.el-menu-item {
min-width: auto !important;
padding-left: 55px !important;
}
.el-menu-item-group__title {
padding-top: 0px !important;
}

.el-submenu {
margin-left: 20px;
padding-right: 20px;
}

.el-submenu__icon-arrow {
color: #fff !important;
}

.el-menu-item {
transition: all 0.2s ease-in-out;
color: #fff !important;
a {
  display: block;
  color: #bfcbd9;
}
//菜单悬停
&.is-active {
  color: #fff !important;
  border-left: 5px solid #dfdfdf !important;
  background-color: #0074d9 !important;
}
}

.el-menu-item:hover {
background-color: #0074d9 !important;
color: #fff !important;
transition: all 0.2s ease-in-out;
}

.el-submenu__title {
transition: all 0.2s ease-in-out;
color: #fff !important;
}

.el-submenu__title:hover {
background-color: #0074d9 !important;
color: #fff !important;
transition: all 0.3s ease-in-out;
.el-submenu__icon-arrow {
  color: #fff !important;
}
}
</style>

`